<template>
	<div class="pager">
	    <Page 
	    :total="totalCount" 
	    :page-size="pageSize" 
	    :current="pageIndex"
	    @on-change="changePage"
	    @on-page-size-change="changePageSize"
	    show-elevator 
	    show-sizer 
	    show-total></Page>
	</div>
</template>

<script>
    export default {
    	props:{
			totalCount :Number,
			pageSize   :{
				type: Number,
				default: 10				
			},
			pageIndex  : {
				type: Number,
				default: 1
			}   
    	},
        data() {
            return {

            };
        },
        mounted() {

        },       
        methods:{
            changePage(index) {
            	this.$emit('changePage',index);
            },
            changePageSize(size) {
                this.$emit('changePageSize',size);
            }
        }
    };
</script>

<style scoped>
   .pager{
   	  position: relative;
   	  margin:20px 0;
   }
</style>